<template>
  <div class="mb-20" style="padding-top:44px;">
    <NavBar />
    <div class="flex justify-center">
      <div class="container-width">
        <div class="main">
          <div class="nav">
            首页 / 园企对接列表 / {{docking.name}}
          </div>
          <div style="margin-top:23px;font-size: 24px;font-weight: 500;color: #000000;letter-spacing: 1px;">{{docking.name}}</div>
          <!--
          <div style="margin-top:20px;width:100%;height:456px;">
            <img :src="docking.pictureurl" style="width:100%;height:456px;" />
          </div>
          -->
          <div class="content">
            <div v-html="docking.content"></div>
          </div>
          <div class="foot">
            <img class="footpicture" src="../assets/ad.png" />
          </div>
        </div>
      </div>
      <!-- 留言板 -->
      <div class="duijieitem">
        <div class="duijiehang">
          <div class="duijiexiangmu">
            留言板
          </div>
          <div class="duijiexiangmumain">
            <div class="duijietype">
              <input type="radio" name="yuanqu" value="1">园区登记
              <input type="radio" name="yuanqu" value="2" checked style="margin-left: 10px">项目登记
            </div>
            <div class="inputitem">
              <el-input v-model="yuanquForm.yuanquname" prefix-icon="el-icon-school" placeholder="园区名称"></el-input>
            </div>
            <div class="inputitem">
              <el-input v-model="yuanquForm.name" prefix-icon="el-icon-user" placeholder="姓名"></el-input>
            </div>
            <div class="inputitem">
              <el-input v-model="yuanquForm.mobile" prefix-icon="el-icon-mobile-phone" placeholder="电话（必填）"></el-input>
            </div>
            <div class="fasongitem ">
              <a href="#" class="fasong">
                发送
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { fetchDocking } from '@/api/docking'
import NavBar from "@/components/NavBar.vue"

export default {
  components: {
    NavBar
  },
  data() {
    return {
      docking: {},
      yuanquForm: {
        yuanquname: '',
        name: '',
        mobile: ''
      },
    }
  },
  created() {
    fetchDocking(this.$route.params.id).then(response => {
      console.info(response)
      this.docking = response.data
    })
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.contain {
  display: flex;
  justify-content: space-between;
}

.main {
  width: 56.25rem;
  margin-bottom: 1.25rem;
}

.main .nav {
  font-size: 0.625rem;
  font-family: PingFangHK-Regular, PingFangHK;
  font-weight: 400;
  color: #A4A8AF;
  margin-top: 0.8125rem;
}

.main .content {
  margin-top: 0.8125rem;
  background: #FFFFFF;
  padding: 2.125rem;
}

.main .foot .footpicture {
  margin-top: 1.75rem;
  width: 56.25rem;
  height: 3.3125rem;
  display: block;
}

/* duijie开始 */
.duijieitem {
  background: rgba($color: #000000, $alpha: 0);
  position: fixed;
  right: 1.5625rem;
  bottom: 1.5625rem;
}

.duijieitem .duijiehang .duijiexiangmu {
  font-size: 0.875rem;
  padding-left: 1.1875rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #FFFFFF;
  height: 2.8125rem;
  line-height: 2.8125rem;
  background: #FE7743;
  border-radius: 10px 10px 0px 0px;
}

.duijieitem .duijiehang .duijiexiangmumain{
  padding-bottom: 1.25rem;
  background: #FFFFFF;
  border-radius: 0px 0px 10px 10px;
}

.duijieitem .duijiehang .duijietype {
  padding-top: 1.25rem;
  margin-left: 0.9375rem;
  margin-right: 0.9375rem;
}

.duijieitem .duijiehang .duijietype input {
  font-size: 0.875rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #000000;
}

.duijieitem .duijiehang .inputitem {
  width: 15rem;
  line-height: 2.75rem;
  background: #F9FAF9;
  border-radius: 4px;
  margin-top: 1.1875rem;
  margin-left: 0.9375rem;
  margin-right: 0.9375rem;

}

.duijieitem .duijiehang .fasongitem {
  width: 5.6875rem;
  height: 2.75rem;
  line-height: 2.75rem;
  background: #FE7743;
  border-radius: 4px;
  margin-top: 1.1875rem;
  margin-left: 10rem;
  text-align: center;
  font-size: 0.875rem;
  font-family: PingFangHK-Semibold, PingFangHK;
  font-weight: 600;
  color: #FFFFFF;
}
</style>